<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>班次管理</title>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=path%>/jquery-easyui/themes/icon.css">
<style type="text/css">
</style>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/jquery-1.8.0.js"></script>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.json-2.4.js"></script>
<script type="text/javascript" src="<%=path%>/js/post.js"></script>
<script type="text/javascript" src="<%=path%>/js/util.js"></script>
<script type="text/javascript">
	var path = '${pageContext.request.contextPath}';

	function checkClick() {
		var dialog = $('#dlgWin');
		var options = dialog.dialog('options');

		var inp = $('#night');
		var opt = inp.validatebox('options');

		if ($('#hasNight').attr("checked")) {
			$('#pnlNight').panel('expand', true);
			options.height = 400;
			opt.required = true;
		} else {
			$('#pnlNight').panel('collapse', true);
			options.height = 220;
			opt.required = false;
		}

		dialog.dialog(options);
		inp.validatebox(opt);
	}

	function formatNightCheck(val, row) {
		return '<a href="#" onclick="showNightwork(' + val + ')">修改时间</a>'
				+ '&nbsp&nbsp&nbsp&nbsp<a href="#" onclick="clearNightwork('
				+ val + ')">清除时间</a>';
	}

	function show() {
		$('#form').form('clear');
		$('#name').val('新班次');
		setDefualtDate();

		$('#hasNight').attr('checked', true);
		checkClick();

		var grid = $('#gridNight');
		var checks = [];
		for ( var i = 1; i <= 4; i++) {

			checks.push({
				index : i - 1,
				name : '第' + i + '巡检'
			});
		}

		grid.datagrid({
			data : checks
		});

		grid.datagrid('uncheckAll');
		grid.datagrid('unselectAll');

		var dialog = $('#dlgWin');
		dialog.dialog('open');
	}

	function edit() {
		var grid = $('#grid');
		var row = grid.datagrid('getSelected');
		if (!row) {
			$.messager.alert('提示', '请选择数据!');
			return;
		}

		var form = $('#form');
		form.form('clear');
		form.form('load', row);

		var nightId = $('#nightId').val();
		$('#hasNight').attr('checked', nightId != null && nightId.length > 0);
		checkClick();

		grid = $('#gridNight');

		var checks = [];
		var nightCheckList = row.nightCheckList;
		var selectList = [];
		for ( var i = 1; i <= 4; i++) {
			var name = '第' + i + '巡检';
			var index = i - 1;
			if (nightCheckList && nightCheckList.length >= i) {
				checks.push({
					index : index,
					name : name,
					startTime : nightCheckList[index].startTime,
					endTime : nightCheckList[index].endTime
				});
				selectList.push(index);
			} else {
				checks.push({
					index : index,
					name : name
				});
			}
		}

		grid.datagrid({
			data : checks
		});

		grid.datagrid('uncheckAll');
		grid.datagrid('unselectAll');

		$.each(selectList, function(i, n) {
			grid.datagrid('selectRow', n);
		});

		$('#dlgWin').dialog('open');
	}

	function save() {
		var morningId = $('#morningId').val();
		var afternoonId = $('#afternoonId').val();
		var nightId = $('#nightId').val();
		if (!morningId || !afternoonId) {
			$.messager.alert('错误', '请选择白班时间', 'error');
			return;
		}

		if (morningId == afternoonId) {
			$.messager.alert('错误', '时间不能相同', 'error');
			return;
		}

		var checked = $('#hasNight').attr("checked");
		if (checked) {
			if (!nightId) {
				$.messager.alert('错误', '请选择夜班时间', 'error');
				return;
			}

			if (morningId == nightId || nightId == afternoonId) {
				$.messager.alert('错误', '时间不能相同', 'error');
				return;
			}
		}

		var name = 'schedule';
		var url = path + '/' + name + '/save/';

		var dialog = $('#dlgWin');
		var form = $('#form');

		if (form && !form.form('validate')) {
			return;
		}
		var dto = $(form).serializeObject();

		if (checked) {
			var checks = [];
			var rows = $('#gridNight').datagrid('getSelections');
			$.each(rows, function(i, n) {
				if (n.startTime && n.endTime) {
					checks.push({
						orderBy : n.index,
						startTime : n.startTime ? n.startTime : null,
						endTime : n.endTime ? n.endTime : null
					});
				} else {
					checks.push({
						orderBy : n.index
					});
				}
			});

			dto.nightCheckList = checks;
		} else {
			dto.nightId = null;
		}

		var json = $.toJSON(dto);
		var data = name + "=" + json;

		$.messager.progress({
			title : '系统提示',
			msg : '处理中，请稍候...'
		});

		$.ajax({
			type : "POST",
			url : url,
			data : data,
			success : function(data) {
				$.messager.progress('close');

				if (data.isSucess) {

					dialog.dialog('close');
					$.messager.show({
						title : '系统提示',
						msg : '处理成功！',
						timeout : 2000,
						showType : 'slide'
					});
					var grid = $('#grid');
					grid.datagrid('load');
				} else {
					$.messager.alert('错误', data.message, 'error');
				}
			},
			error : function() {
				$.messager.progress('close');
				$.messager.alert('错误', '无法处理！', 'error');
			}
		});
	}

	function del() {
		var grid = $('#grid');
		var url = path + '/schedule/delete/';
		delById(grid, url);
	}

	function selectMorning() {
		var dialog = $('#dlgWorktime');
		var options = dialog.dialog('options');
		options.title = '选择上午时间段';
		dialog.dialog('setTitle', options.title);
		dialog.dialog('open');
	}

	function showNightwork(index) {
		var grid = $('#gridNight');
		var row = grid.datagrid('getRows')[index];

		if (!row.startTime || !row.endTime) {
			$('#startTimeNight').timespinner('setValue', '00:00');
			$('#endTimeNight').timespinner('setValue', '01:00');
		} else {
			$('#startTimeNight').timespinner('setValue', row.startTime);
			$('#endTimeNight').timespinner('setValue', row.endTime);
		}

		var dialog = $('#dlgNightwork');
		var options = dialog.dialog('options');
		options.index = index;
		options.title = '选择巡检' + index + '时间段';
		dialog.dialog('setTitle', options.title);
		dialog.dialog('open');

		grid.datagrid('selectRow', index);
	}

	function clearNightwork(index) {
		var grid = $('#gridNight');
		var row = grid.datagrid('getRows')[index];
		grid.datagrid('selectRow', index);
		row.startTime = null;
		row.endTime = null;
		grid.datagrid('refreshRow', index);
	}

	function setNightwork() {
		var start = $('#startTimeNight').timespinner('getValue');
		var end = $('#endTimeNight').timespinner('getValue');

		if (!start || !end) {
			return;
		}

		var dialog = $('#dlgNightwork');
		var options = dialog.dialog('options');
		var index = options.index;

		var grid = $('#gridNight');
		var row = grid.datagrid('getRows')[index];
		var startDate = new Date(2000, 0, 1, start.split(':')[0], start
				.split(':')[1], 0);
		var endDate = new Date(2000, 0, 1, end.split(':')[0],
				end.split(':')[1], 0);

		row.startTime = start;
		row.endTime = end;	

		grid.datagrid('refreshRow', index);
		dialog.dialog('close');
	}

	function selectAfternoon() {
		var dialog = $('#dlgWorktime');
		var options = dialog.dialog('options');
		options.title = '选择下午时间段';
		dialog.dialog('setTitle', options.title);
		dialog.dialog('open');
	}

	function selectNight() {
		var dialog = $('#dlgWorktime');
		var options = dialog.dialog('options');
		options.title = '选择夜班时间段';
		dialog.dialog('setTitle', options.title);
		dialog.dialog('open');
	}

	function setWorktime() {
		var grid = $('#gridWorkTime');
		var row = grid.datagrid('getSelected');
		if (!row) {
			$.messager.alert('提示', '请选择数据!');
			return;
		}

		var dialog = $('#dlgWorktime');
		var ipt = null;
		var hidden = null;
		if (dialog.dialog('options').title.indexOf('上午') > 0) {
			ipt = $('#morning');
			hidden = $('#morningId');
		} else if (dialog.dialog('options').title.indexOf('下午') > 0) {
			ipt = $('#afternoon');
			hidden = $('#afternoonId');
		} else {
			ipt = $('#night');
			hidden = $('#nightId');
		}

		ipt.val(row.startTime + '-' + row.endTime);
		hidden.val(row.id);

		dialog.dialog('close');
	}

	function setDefualtDate() {
		var date = new Date();
		date.setDate(1);
		date.setMonth(0);
		$('#startDate').datebox('setValue', date.getFullYear() + '-01-01');
		$('#endDate').datebox('setValue', date.getFullYear() + '-12-31');
	}
</script>
</head>
<body class="easyui-layout">
	<!-- 添加时间段窗体 -->
	<div id="dlgWin" class="easyui-dialog" title="添加班次"
		style="padding:10px"
		data-options="
				width:620,
				height:400,
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						save();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgWin').dialog('close');
					}
				}]
			">
		<form id="form" method="post">
			<input id="id" name="id" type="hidden" />
			<table>
				<tr>
					<td>时间段名称:</td>
					<td><input id="name" class="easyui-validatebox" type="text"
						name="name" data-options="required:true" /></td>
				</tr>
				<tr>
					<td>日期 从:</td>
					<td><input id="startDate" name="startDate"
						data-options="required:true" class="easyui-datebox" type="text" />
					</td>
					<td>到:</td>
					<td><input id="endDate" name="endDate"
						data-options="required:true" class="easyui-datebox" type="text" />
					</td>
				</tr>
				<tr>
					<td>白班上午:</td>
					<td><input id="morningId" name="morningId" type="hidden" /> <input
						id="morning" name="morning" class="easyui-validatebox" type="text"
						data-options="required:true" readonly="readonly" /> <a href="#"
						class="easyui-linkbutton"
						data-options="iconCls:'icon-add',plain:true"
						onclick="selectMorning()"></a>
					</td>
					<td>白班下午:</td>
					<td><input id="afternoonId" name="afternoonId" type="hidden" />
						<input id="afternoon" name="afternoon" class="easyui-validatebox"
						type="text" data-options="required:true" readonly="readonly" /> <a
						href="#" class="easyui-linkbutton"
						data-options="iconCls:'icon-add',plain:true"
						onclick="selectAfternoon()"></a>
					</td>
				</tr>
				<tr>
					<td>夜班:<input id="hasNight" type="checkbox"
						onclick="checkClick()" /></td>
					<td colspan="5">
						<div id="pnlNight" class="easyui-panel" title="夜班设置"
							style="width:500px;height:210px;"
							data-options="iconCls:'icon-save',collapsible:false,minimizable:false,maximizable:false,closable:false">
							<div id="tbNight" style="height:auto">
								时间：<input id="nightId" name="nightId" type="hidden" /> <input
									id="night" name="night" class="easyui-validatebox" type="text"
									data-options="required:false" readonly="readonly" /> <a
									href="#" class="easyui-linkbutton"
									data-options="iconCls:'icon-add',plain:true"
									onclick="selectNight()"></a>
							</div>
							<table id="gridNight" class="easyui-datagrid"
								data-options="
			sortOrder:'asc',
			sortName:'name',
			toolbar:'#tbNight',
			remoteSort:false,
			checkOnSelect:true,
			selectOnCheck:true,
			idField:'name',
			fit:true,
			singleSelect: false,
			collapsible:true,
			striped: true,
			fitColumns:false
			">
								<thead>
									<tr>
										<th data-options="field:'nightCheckList',checkbox:true"></th>
										<th data-options="field:'name',width:60,align:'left'">名称</th>
										<th data-options="field:'startTime',width:120,align:'left'">开始时间</th>
										<th data-options="field:'endTime',width:120,align:'left'">结束时间</th>
										<th
											data-options="field:'index',width:140,align:'center',formatter:formatNightCheck">操作</th>
									</tr>
								</thead>
							</table>
						</div>
				</tr>
			</table>

		</form>
	</div>

	<div id="dlgNightwork" class="easyui-dialog" title="编辑巡检"
		style="padding:10px"
		data-options="
				width:240,
				height:150,
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						setNightwork();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgNightwork').dialog('close');
					}
				}]
			">
		<table>
			<tr>
				<td>开始时间:</td>
				<td><input id="startTimeNight" class="easyui-timespinner"
					data-options="required:false,showSeconds:false," /></td>
			</tr>
			<tr>
				<td>结束时间:</td>
				<td><input id="endTimeNight" class="easyui-timespinner"
					data-options="required:false,showSeconds:false," /></td>
			</tr>
		</table>
	</div>
	<!-- 选择时间段 -->
	<div id="dlgWorktime" class="easyui-dialog" title="选择时间段 "
		style="width:680px;height:400px;padding:10px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						setWorktime();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgWorktime').dialog('close');
					}
				}]
			">
		<div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'center'">
				<table id="gridWorkTime" class="easyui-datagrid"
					data-options="
			sortOrder:'asc',
			sortName:'name',
			remoteSort:false,
			idField:'id',
			fit:true,
			singleSelect:true,
			collapsible:true,
			url:'<%=path%>/worktime/loadAll/',
			toolbar:'#tb',
			striped: true,
			fitColumns:false,
			rownumbers:true
			">
					<thead>
						<tr>
							<th data-options="field:'name',width:100,align:'left'">名称</th>
							<th data-options="field:'startTime',width:60,align:'left'">上班时间</th>
							<th data-options="field:'endTime',width:60,align:'left'">下班时间</th>
							<th data-options="field:'hour',width:50,align:'right'">工时</th>
							<th data-options="field:'beforeStart',width:80,align:'right'">提前签到分钟</th>
							<th data-options="field:'afterStart',width:80,align:'right'">延后签到分钟</th>
							<th data-options="field:'beforeEnd',width:80,align:'right'">提前签退分钟</th>
							<th data-options="field:'afterEnd',width:80,align:'right'">延后签退分钟</th>
						</tr>
					</thead>
				</table>

			</div>
		</div>
	</div>

	<!-- 工具栏 -->
	<div id="tb" style="height:auto">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
			onclick="show()">添加</a><a href="#" class="easyui-linkbutton"
			iconCls="icon-edit" plain="true" onclick="edit()">编辑</a> <a href="#"
			class="easyui-linkbutton" iconCls="icon-remove" plain="true"
			onclick="del()">删除</a>
	</div>


	<div data-options="region:'center'">
		<table id="grid" class="easyui-datagrid"
			data-options="
			sortOrder:'asc',
			sortName:'name',
			remoteSort:false,
			idField:'id',
			fit:true,
			singleSelect:true,
			collapsible:true,
			url:'<%=path%>/schedule/loadAll/',
			toolbar:'#tb',
			striped: true,
			fitColumns:false,
			rownumbers:true
			">
			<thead>
				<tr>
					<th data-options="field:'name',width:70,sortable:false">班次名称</th>
					<th data-options="field:'morning',width:120,sortable:false">上午</th>
					<th data-options="field:'afternoon',width:120,sortable:false">下午</th>
					<th data-options="field:'night',width:120,sortable:false">晚上</th>
					<th
						data-options="field:'startDate',width:80,align:'left',formatter:formatDate">开始日期</th>
					<th
						data-options="field:'endDate',width:80,align:'left',formatter:formatDate">结束日期</th>
				</tr>
			</thead>
		</table>

	</div>
</body>
</html>